<template>
  <div>
    <detail-header :sight="sight"></detail-header>
    <banner @showSwiper="handleShowSwiper" :sight="sight" :banner="banner" :gallery="gallery"></banner>
    <photo-swiper v-show="isShow" @close="handleClose" :gallery="gallery"></photo-swiper>
    <detail-content :cat="cat"></detail-content>
    <div class="content"></div>
  </div>
</template>

<script>
import DetailHeader from './components/Header'
import Banner from './components/Banner'
import DetailContent from './components/Content'
import PhotoSwiper from '@common/photoSwiper/Swiper'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    DetailHeader,
    Banner,
    DetailContent,
    PhotoSwiper
  },
  data () {
    return {
      isShow: false,
      sight: '',
      banner: '',
      gallery: [],
      cat: []
    }
  },
  methods: {
    handleShowSwiper () {
      this.isShow = true
    },
    handleClose () {
      this.isShow = false
    },
    getInfor () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleGetInforSucc)
    },
    handleGetInforSucc (data) {
      const msg = data.data.data
      this.sight = msg.sightName
      this.banner = msg.bannerImg
      this.gallery = msg.gallaryImgs
      this.cat = msg.categoryList
    }
  },
  mounted () {
    this.getInfor()
  }
}
</script>

<style lang="stylus" scoped>
  .content
    height 1000px
</style>
